<template>
  <div class="header_container">
    <el-dropdown @command="handleCommand">
      <i class="el-icon-user-solid" style="margin-right: 15px" @click="toLogin()" v-if="loginStatus">
          <!-- {{`${loginStatus?'欢迎，'+username:'请登录'}`}} -->
          欢迎,{{username}}
        </i>
        <i class="el-icon-user-solid" style="margin-right: 15px" @click="toLogin()" v-else>
          <!-- {{`${loginStatus?'欢迎，'+username:'请登录'}`}} -->
          请登录
        </i>
      <i class="el-icon-caret-bottom"></i>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item class="select" command="a">
          <i class="el-icon-close"></i>
          退出登录
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
export default {
  data(){
      return {
        //   username:localStorage.getItem('admin'),
        //   loginStatus:localStorage.getItem('login')
      }
  },
  computed:{
      username(){
          return localStorage.getItem('admin')
      },
      loginStatus(){
          return localStorage.getItem('login')
      }
  },
  methods: {
    toLogin() {
      this.$router.push("/login");
    },
    handleCommand(){
        localStorage.setItem('login',false)
    }
  },
};
</script>

<style lang="scss" scoped>
.select {
  width: 200px;
}
</style>